<template>
	<view>
		<Sheader :title="'找回密码'" :background="'#fff'" :color="'#203136'"/>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="170" label="注册对象" :disabled="true">
					<u-input v-model="form.name"  />
				</u-form-item>
				<u-form-item label-width="170" label="身份证号码" :required="true">
					<u-input v-model="form.idNo" placeholder="请输入身份证号码" />
				</u-form-item>
				<u-form-item label-width="170" label="手机号码" :required="true">
					<u-input v-model="form.telephone" type="number" placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item label-width="170" label="验证码" :required="true">
					<u-input v-model="form.authCode" maxlength="4" placeholder="请输入验证码"/>
					<u-button class="send-btn" type="primary" slot="right" size="medium"  :disabled="isLoad" @click="sendCode">{{codeStr}}</u-button>
				</u-form-item>
			</u-form>
			<!-- <view class="register-check">
				<u-checkbox v-model="isChecked" shape="circle">
					<text  class="text" @click="$utils.gotoPage('../agreement/index')">我同意《会员服务协议》</text>	
				</u-checkbox>
			</view> -->
			<u-button class="register-btn" type="primary" @click="sendForm">下一步</u-button>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="showTip" :content="content" :title="title" @confirm="confirm" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	export default {
		data() {
			return {
				showTip: false,
				title: '提示',
				content: '请输入正确的手机号',
				form: {
					name: '服务者',
					idNo: '',
					telephone: '',
					authCode: ''
				},
				seconds: 60,
				codeStr: '获取验证码',
				timer: null,
				isLoad: false
			}
		},
		components: {
			Sheader
		},
		async onLoad() {
		},
		onUnload() {
			clearInterval(this.time)
			this.time = null
		},
		methods: {
			async sendCode() {
				if(!this.$u.test.mobile(this.form.telephone)) {
					this.showTip = true
					this.content = '请输入正确的手机号'
					return false
				}
				this.isLoad = true
				this.seconds = 60
				this.codeStr = '请60S后再试'
				this.timer = setInterval(() => {
					if (this.seconds > 1) {
						this.seconds = this.seconds - 1
						this.codeStr = `请${this.seconds}S后再试`
					} else {
						clearInterval(this.timers)
						this.isLoad = false
						this.seconds = 0
						this.codeStr = '获取验证码'
						this.timer = null
					}
				}, 1000)
				const res = await this.$http.request('/user/sendRegAuthCode', {
					telephone: this.form.telephone
				}, 'post', true).then((res) => {
					this.$refs.uToast.show({
						title: res.msg,
						type: res.success ? 'success' : 'error'
					})
				})
			},
			async sendForm() {
				if(!this.$u.test.idCard(this.form.idNo)) {
					this.showTip = true
					this.content = '请输入正确的身份证号'
					return false
				}
				if(!this.form.authCode) {
					this.showTip = true
					this.content = '请输入正确的验证码'
					return false
				}
				const res = await this.$http.request('/provider/forget', this.form, 'post', true, false).then((res) => {
					if (!res.success) {
						this.showTip = true
						this.content = res.msg
						return
					}
					this.title = '保存提示'
					this.content = '是否要找回密码 \n 请重新设置新的密码'
					this.showTip = true
					this.id = res.data.data
				})
			},
			confirm() {
				if (this.title == '保存提示') {
					this.$utils.gotoPage('./retrievePassword2?id=' + this.id)
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		padding-top: 90rpx;
		height: 100vh;
	}
	.title {
		font-family: YouSheBiaoTiHei;
		margin: 32rpx 0;
		font-size: 48rpx;
		font-weight: 800;
		line-height: 48rpx;
		color: #FFFFFF;
		font-style: oblique;
	}
	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24rpx;
		color: #ECF5FF;
		opacity: 0.9;
	}
	
	/deep/ .u-form-item {
		width: 85vw;
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
		opacity: 0.5;
	}
	
	.bottom-left {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		color: #FFFFFF;
		opacity: 0.5;
	}
	.bottom-right {
		padding: 20rpx 46rpx;
		background-color: rgba(255,255,255,0.2);
		border-radius: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #FFFFFF;
		opacity: 1;		
	}
	.send-btn {
		width: 180rpx;
		font-size: 12rpx;
	}
	.text {
		color: #2979FF;
	}
	.register-check {
		height: 54rpx;
	}
	/deep/ .u-checkbox {
		margin-top: 10rpx;
		width: 85vw;
		text-align: left;
	}
	.register-btn {
		margin-top: 20rpx;
		width: 85vw;
	}
	.user-info {
		padding: 30rpx;
		background-color: #fff;
	}
	.user-info__box {
		padding: 24rpx 20rpx;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;		
	}	
	.user-bottom {
		padding: 26rpx;
		text-align: left;
		font-size: 10rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #909399;
		opacity: 1;
		background: #F8F8F8;
		width: 100%;
	}
</style>
